<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对象属性 【文本与图片对齐】</title>
		<!-- 垂直方向对象属性 vertical-align
			使用方法：1.用于表格中单元格垂直居中
						2.用于行内元素以及内块元素的垂直居中
						【文本和图片垂直居中（对齐）效果】
						对齐分为四级：基线对齐、顶部对齐
									居中对齐、底部对齐
						元素种类：块元素、行元素、行内块元素
						块元素特点：独占一行、设置宽高
						行元素特点：一行内显示、不可以设置宽高
						网页：元素之间嵌套生成
						行元素与块元素可以任意嵌套
						前提：设置宽高---行套块
									---块套块 √
									---块套行  √
						前提：一行内显示---行套块 √
										---块套块 ×
										---块套行 √
										---行套行 √
						-->
	</head>
	<body>
		<!-- 需求结构：4个p，嵌套文字：图片叫什么名字
								文字后加img，设定宽高：25~100px
								基线对齐、顶部对齐
								居中对齐、底部对齐
								-->
		<div><span>lorem1</span><span>lorem2</span></div>
		<h1>文本与图片垂直属性</h1>
		<p>村民<img src="img/我的世界村民_爱给网_aigei_com.png" alt="村民" width="100px"
		height="100px"/>基线对齐</p>
		<p>不死图腾<img src="img/不死图腾_爱给网_aigei_com.png" alt="不死图腾" width="100px"
		height="100px"/>顶部对齐</p>
		<p>草方块<img src="img/草方块-第2张图片_爱给网_aigei_com.png" alt="草方块" width="100px"
		height="100px"/>居中对齐</p>
		<p>鸡<img src="img/我的世界 (39)_爱给网_aigei_com.png" alt="鸡" width="100px"
		height="100px"/>底部对齐</p>
		<!-- css选择器--抓第一张图片.....
		思路：派生选择器：抓后代+伪类选择器：添加效果
		-->
		
		<body>
			<style>
				img.top{
					vertical-align: top;
					
				}
				img.middle{
					vertical-align: middle;
				}
				img.bootom{
					vertical-align: bottom;
				}
			</style>
</html>